<template>
 <div class="repertory">
   <div class="card-search">
    <el-form size="small" :inline="true" label-width="80px" :model="form" class="demo-form-inline">
      <el-form-item  style="" label="设备类型">
        <el-select filterable clearable v-model="form.stockDeviceTypeId" placeholder="请选择设备类型">
            <el-option v-for="(item, index) in stockDeviceTypes" :key="index" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="规格型号">
        <el-select clearable v-model="form.specificationId" placeholder="请选择设备类型">
            <el-option v-for="(item, index) in specifications" :key="index" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item style="" label="供应商">
        <el-select clearable v-model="form.supplierId" placeholder="请选择设备类型">
            <el-option v-for="(item, index) in suppliers" :key="index" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  style="float:right;" label=" ">
        <el-button  icon="el-icon-search" type="primary" @click="onSubmit()">查询</el-button>
        <el-button  icon="el-icon-refresh" type="primary" plain @click="refresh()">重置</el-button>
        <el-button icon="el-icon-plus" type="primary" @click="$router.push('/stockAdd')">新增库存项目</el-button>
      </el-form-item>
    </el-form>
   </div>
   <div class="card-table">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="stockDeviceType"
          label="设备类型"
          width="width">
          <template slot-scope="{row}">{{row.stockDeviceType.name}}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="specification"
          label="规格类型"
          width="width">
          <template slot-scope="{row}">{{row.specification.name}}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="supplier"
          label="供应商"
          width="width">
          <template slot-scope="{row}">
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover">
              <el-descriptions border :column="1" size="mini">
                <el-descriptions-item label="供应商名">{{row.supplier.name}}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{row.supplier.contacts}}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{row.supplier.phone}}</el-descriptions-item>
              </el-descriptions>
              <div slot="reference">{{row.supplier.name}}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="number"
          label="库存量"
          width="width">
        </el-table-column>
        <el-table-column
          align="center"
          label="工单查询"
          width="width">
          <template slot-scope="{row}">
            <el-button style="padding:8px;12px" type="primary" plain @click="getInOut(row, 'out')">出库工单</el-button>
            <el-button style="padding:8px;12px" type="primary" plain @click="getInOut(row, 'in')">入库工单</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="出/入库"
          width="width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-document-remove" style="padding:9px;12px" type="primary" @click="selectRow=row;showOutDialog=true">出库</el-button>
            <el-button icon="el-icon-document-add" style="padding:9px;12px" type="primary" @click="selectRow=row;showInDialog=true">入库</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagin"  v-if="total>pageSize">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <el-dialog width="60%" :modal-append-to-body="false" title="出库工单" :visible.sync="dialogTableVisibleOut">
        <el-table :header-cell-style="getRowClass" :data="outTableData" style="width: 100%">
          <el-table-column prop="time" label="时间" align="center" width="100">
            <template slot-scope="{row}">
              <span>{{row.time}}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备类型" align="center">
          <template slot-scope="{row}">
            <span>{{row.stockDeviceType.name}}</span>
          </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center">
            <template slot-scope="{row}">
              <span>{{row.specification.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="供应商" align="center">
            <template slot-scope="{row}">
              <span>{{row.supplier.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="出库量" align="center">
            <template slot-scope="{row}">
              <span>{{row.number}}</span>
            </template>
          </el-table-column>
          <el-table-column label="库存" align="center">
            <template slot-scope="{row}">
              <span>{{row.stockNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="使用人" align="center">
            <template slot-scope="{row}">
              <span>{{row.principal}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="inputPeople"
            label="填表人"
            width="width">
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="{row}">
              <span>{{row.remark}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagin" v-if="total>0">
          <el-pagination
            background
            @size-change="handleSizeChange_out"
            @current-change="handleCurrentChange_out"
            :current-page="currentPage_out"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize_out"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total_out">
          </el-pagination>
        </div>
      </el-dialog>
      <el-dialog width="60%" :modal-append-to-body="false" title="入库工单" :visible.sync="dialogTableVisibleIn">
        <el-table :header-cell-style="getRowClass" :data="inTableData" style="width: 100%">
          <el-table-column label="时间" align="center" width="100">
            <template slot-scope="{row}">
              <span>{{row.time}}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备类型" align="center">
            <template slot-scope="{row}">
              <span>{{row.stockDeviceType.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center">
            <template slot-scope="{row}">
              <span>{{row.specification.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="供应商" align="center">
            <template slot-scope="{row}">
              <span>{{row.supplier.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单价" align="center">
            <template slot-scope="{row}">
              <span>{{row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column label="入库量" align="center">
            <template slot-scope="{row}">
              <span>{{row.number}}</span>
            </template>
          </el-table-column>
          <el-table-column label="库存" align="center">
            <template slot-scope="{row}">
              <span>{{row.stockNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="经办人" align="center">
            <template slot-scope="{row}">
              <span>{{row.principal}}</span>
            </template>
          </el-table-column>
          <el-table-column label="总价" align="center">
            <template slot-scope="{row}">
              <span>{{row.allPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="inputPeople"
            label="填表人"
            width="width">
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="{row}">
              <span>{{row.remark}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagin" v-if="total>0">
          <el-pagination
            background
            @size-change="handleSizeChange_in"
            @current-change="handleCurrentChange_in"
            :current-page="currentPage_in"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize_in"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total_in">
          </el-pagination>
        </div>
      </el-dialog>
      <el-dialog  width="40%" :modal-append-to-body="false" :title="'出库信息 '" :visible.sync="showInDialog">
        <div slot="title">
          出库信息<span style="color:#999;font-size:14px;"> ( {{selectRow.stockDeviceType.name }} | {{selectRow.specification.name}} | {{selectRow.supplier.name}} )</span>
        </div>
        <el-form :rules="rulesIn"  ref="formIn" label-position="right" label-width="100px"  size="small" :model="formIn">
          <el-form-item label="单价(元)" prop="price">
              <el-input type="number" v-model.number="formIn.price"></el-input>
          </el-form-item>
          <el-form-item :label="'入库量('+ selectRow.specification.unit +')'" prop="inNum">
            <el-input type="number" v-model.number="formIn.inNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="经办人" prop="principal">
            <el-input v-model="formIn.principal" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
              <el-input :rows="4" type="textarea" v-model="formIn.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('formIn');showInDialog=false">取 消</el-button>
          <el-button type="primary" @click="inventory()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog width="40%" :modal-append-to-body="false" :title="'出库信息'" :visible.sync="showOutDialog">
        <div slot="title">
          出库信息<span style="color:#999;font-size:14px;"> ( {{selectRow.stockDeviceType.name }} | {{selectRow.specification.name}} | {{selectRow.supplier.name}} )</span>
        </div>
        <el-form :rules="rulesOut"  ref="formOut" label-position="right" label-width="100px"  size="small" :model="formOut">
          <el-form-item :label="'出库量('+ selectRow.specification.unit +')'" prop="outNum">
            <el-input style="width:calc(100% - 100px)" type="number" v-model.number="formOut.outNum" autocomplete="off"></el-input>
            <el-tag style="margin-left:12px; width:88px;" :type="maxNmuber? 'danger':''">库存量:{{selectRow.number}}</el-tag>
          </el-form-item>
          <el-form-item label="使用人" prop="principal">
            <el-input v-model="formOut.principal" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
              <el-input :rows="4" type="textarea" v-model="formOut.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('formOut');showOutDialog=false">取 消</el-button>
          <el-button type="primary" @click="outbound()">确 定</el-button>
        </div>
      </el-dialog>
   </div>
 </div>
</template>

<script>
// inStockCreate
import { specificationGet, stockGet, stockGetInOut, outStockCreate, inStockCreate, stockGetConditions } from '@/api/spare.js'
export default {
  name: 'repertory',
  components: {},
  data () {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 10,
      total_out: 0,
      currentPage_out: 1,
      pageSize_out: 10,
      total_in: 0,
      currentPage_in: 1,
      pageSize_in: 10,
      form: {},

      stockDeviceTypes: [],
      specifications: [],
      suppliers: [],

      maxNmuber: false,
      tableData: [],
      showInDialog: false,
      showOutDialog: false,
      selectRow: {
        specification: {
          unit: ''
        },
        stockDeviceType: {
          name: ''
        },
        supplier: {
          name: ''
        }
      },
      formIn: {
        principal: '',
        inNum: '',
        remark: '',
        price: '',
        number: ''
      },
      formOut: {
        principal: '',
        outNum: '',
        remark: ''
      },
      dialogTableVisibleOut: false,
      dialogTableVisibleIn: false,
      inTableData: [],
      outTableData: [],
      rulesIn: {
        principal: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        inNum: [
          { required: true, message: '请输入出库数量', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入单价', trigger: 'blur' }
        ]
      },
      rulesOut: {
        principal: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        outNum: [
          { required: true, message: '请输入出库数量', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getData()
    // stockDeviceTypeGet().then(res => {
    //   this.stockDeviceTypes = res.data.data.pageData
    // })
    specificationGet().then(res => {
      this.specifications = res.data.data.pageData
    })
    // supplierGet().then(res => {
    //   this.suppliers = res.data.data.pageData
    // })
    stockGetConditions().then(res => {
      this.stockDeviceTypes = res.data.data.stockDeviceType
      this.suppliers = res.data.data.supplier
    })
  },
  methods: {
    onSubmit () {
      var that = this
      that.form.currPage = that.currentPage
      that.form.pageSize = that.pageSize
      stockGet(that.form).then(res => {
        if (res.data.code === 200) {
          that.tableData = res.data.data.pageData
          that.total = res.data.data.total
          that.$message({
            message: '查询成功',
            type: 'success'
          })
        } else {
          that.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    refresh () {
      this.form = {}
      this.getData()
    },
    getData () {
      var that = this
      const params = {
        stockDeviceTypeId: that.form.stockDeviceTypeId,
        supplierId: that.form.supplierId,
        // specificationId: that.form.supplierId,
        currPage: that.currentPage,
        pageSize: that.pageSize
      }
      stockGet(params).then(res => {
        if (res.data.code === 200) {
          console.log(res)
          that.tableData = res.data.data.pageData
          that.total = res.data.data.total
        }
      })
    },
    getInOut (row, blon) {
      var that = this
      var params = {
        _id: row._id,
        inOut: blon
      }
      if (blon === 'in') {
        params = {
          ...params,
          currPage: that.currentPage_in,
          pageSize: that.pageSize_in
        }
      } else {
        params = {
          ...params,
          currPage: that.currentPage_out,
          pageSize: that.pageSize_out
        }
      }
      stockGetInOut(params).then(res => {
        if (blon === 'in') {
          that.inTableData = res.data.data.pageData
          that.dialogTableVisibleIn = true
          that.total_in = res.data.data.total
        } else {
          that.outTableData = res.data.data.pageData
          that.dialogTableVisibleOut = true
          that.total_out = res.data.data.total
        }
      })
    },
    outbound () {
      var that = this
      const payload = {
        ...this.selectRow
      }
      console.log(this.selectRow)
      payload.number = that.formOut.outNum
      payload.principal = that.formOut.principal
      payload.remark = that.formOut.remark
      payload.inputPeople = that.$store.getters.getUserInfo.name
      delete payload._id
      outStockCreate(payload).then(res => {
        if (res.data.code === 200) {
          that.$message({
            message: '出库成功',
            type: 'success'
          })
          this.getData()
          this.showOutDialog = false
          this.$refs.formOut.resetFields()
        } else {
          this.getData()
          that.$message({
            message: res.data.message,
            type: 'wraning'
          })
        }
      })
    },
    inventory () {
      var that = this
      const payload = {
        ...this.selectRow
      }
      payload.number = that.formIn.inNum
      payload.price = that.formIn.price
      payload.principal = that.formIn.principal
      payload.remark = that.formIn.remark
      payload.inputPeople = that.$store.getters.getUserInfo.name
      delete payload._id
      inStockCreate(payload).then(res => {
        if (res.data.code === 200) {
          that.$message({
            message: '入库成功',
            type: 'success'
          })
          this.getData()
          this.showInDialog = false
          this.$refs.formIn.resetFields()
        } else {
          this.getData()
          that.$message({
            message: res.data.message,
            type: 'wraning'
          })
        }
      })
    },
    // 库存分页
    handleSizeChange (val) {
      this.pageSize = val
      this.onSubmit()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.onSubmit()
    },
    // 出入库分页
    handleSizeChange_out (val) {
      this.pageSize_out = val
      this.getInOut()
    },
    handleCurrentChange_out (val) {
      this.currentPage_out = val
      this.getInOut()
    },
    handleSizeChange_in (val) {
      this.pageSize_in = val
      this.getInOut()
    },
    handleCurrentChange_in (val) {
      this.currentPage_in = val
      this.getInOut()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style  scoped>
.pagin{
  display: flex;
  justify-content: right;
  padding: 12px 12px 0 0;
}
.pagin  .el-pager .active{
  background-color: $primary !important;
}
</style>
